import React, { useState } from 'react'
import "./style.less"
import classnames from "classnames"

export default function Tabs (props) {
  const [currentIndex, setCurrentIndex] = useState(0)

  function clickHandle (index) {
    setCurrentIndex(index)
  }

  return (
    <div>
      <ul className="Tab_title_wrap">
        {
          React.Children.map(props.children, (element, index) => {
            return <li className={classnames("Tab_title", { "active": currentIndex === index })} key="index" onClick={() => clickHandle(index)}>{element.props.label}</li>
            // console.log(element.props);
          })
        }
      </ul>
      <ul>
        {
          React.Children.map(props.children, (element, index) => {
            return <li className={classnames("Tab_title", {
              "hide": index !== currentIndex,
              "show": index === currentIndex
            })} key="index" >{element.props.children}</li>
          })
        }
      </ul>
    </div>
  )

}

